// quick view
@bc-highlight:                  rgba(255, 255, 255, 0.12);
@bc-panel-bg:                   #dfe2e2;
@bc-panel-bg-promoted:          #d4d7d7;
@bc-shadow-large:               rgba(0, 0, 0, 0.5);
@bc-shadow-small:               rgba(0, 0, 0, 0.06);
@bc-text:                       #333;

@dark-bc-highlight:             rgba(255, 255, 255, 0.06);
@dark-bc-panel-bg:              #2c2c2c;
@dark-bc-panel-bg-promoted:     #222;
@dark-bc-shadow-large:          rgba(0, 0, 0, 0.5);
@dark-bc-shadow-small:          rgba(0, 0, 0, 0.06);
@dark-bc-text:                  #ccc;

#quick-view-color-swatch {
    width: 40px;
    height: 40px;
    background-size: 100%;
}

#quick-view-image-preview .image-preview {
    line-height: 0;
    background-image: url(preview-bg.svg);
    border-radius: 2px;
    box-shadow: 0 -1px 2px @bc-shadow-small, 0 1px 0 @bc-highlight;

    .dark & {
        box-shadow: 0 -1px 2px @dark-bc-shadow-small, 0 1px 0 @dark-bc-highlight;
        background-image: url(preview-bg-dark.svg);
    }
}

#quick-view-image-preview .image-preview img {
    min-width: 100px;
    max-width: 200px;
    max-height: 200px;
}

#quick-view-image-preview .img-size {
    background-color: @bc-panel-bg-promoted;
    border-top: 1px solid @bc-highlight;
    font-size: 0.9em;
    color: @bc-text;
    padding-left: 3px;
    margin-top: 0;
    text-align: left;
    text-shadow: 0 1px 0px @bc-highlight;

    .dark & {
        background-color: @dark-bc-panel-bg-promoted;
        border-top: 1px solid @dark-bc-highlight;
        color: @dark-bc-text;
        text-shadow: 0 1px 0px @dark-bc-highlight;
    }
}
